<template>
  <div>
    <div>这是用户管理的页面~</div>
    <p></p>
    <button v-on:click="getAllStudents">获取所有用户</button>
    <div v-for="student in students" v-bind:key = student.id>
      {{student}}
    </div>
    <p></p>
    <div>
      请输入查询用户的id:
      <input v-model="queryId">
    </div>
    <button v-on:click="getStudentById">根据id查询指定用户信息</button>
    <div>{{studentById}}</div>
    <p></p>
    <div>
      请输入要添加的用户信息
      <div>
        用户名：
        <input v-model="studentName">
      </div>
      <div>
        学号：
        <input v-model="student_id">
      </div>
      <div>
        班级：
        <input v-model="clas">
      </div>
      <div>
        电话：
        <input v-model="telephone">
      </div>
      <div>
        qq:
        <input v-model="qq">
      </div>
    </div>
    <button v-on:click="addStudent">添加用户</button>
    <p></p>
    <div>
      请输入要修改的用户信息：
      <div>
        id
        <input v-model="updateId">
      </div>
      <div>
        学号：
        <input v-model="updateStudent_id">
      </div>
      <div>
        student name
        <input v-model="updateStudentName">
      </div>
      <div>
        class
        <input v-model="updateClas">
      </div>
      <div>
        电话：
        <input v-model="updatedTelephone">
      </div>
      <div>
        qq:
        <input v-model="updateQq">
      </div>
    </div>
    <button v-on:click="updateStudent">修改用户</button>
    <p></p>
    <div>
      请输入删除用户的id：
      <input v-model = "deleteStudentId">
      <div>
        <button v-on:click="deleteStudent">删除用户</button>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Student",
  data(){
    return{
      students: null,
      queryId: null,
      studentById: null,
      studentName:null,
      clas:null,
      updateStudentId:null,
      updateStudentName:null,
      updateClas:null,
      deleteStudentId:null,
      id:null,
      updateId:null,
      telephone:null,
      updatedTelephone:null,
      qq:null,
      updateQq:null,
      student_id:null,
      updateStudent_id:null


    }
  },
  methods: {
    getAllStudents(){
      axios.get("http://localhost:8081/students")
          .then(resp => {
            console.log(resp);
            this.students = resp.data;
          })
    },
    getStudentById(){
      axios.get(`http://localhost:8081/student/${this.queryId}`)
          .then(resp => {
            console.log(resp);
            this.studentById = resp.data;
          })
    },
    addStudent(){
      axios.post("http://localhost:8081/student",{
        studentName:this.updateStudentName,
        clas:this.updateClas,
        telephone:this.updatedTelephone,
        qq:this.updateQq,
        student_id:this.updateStudent_id
      }).then(resp=>{
        console.log(resp)
      })
    },
    updateStudent(){
      axios.put("http://localhost:8081/student",{
        id:this.updateStudentId,
        studentName:this.updateStudentName,
        clas:this.updateClas,
        telephone:this.updatedTelephone,
        qq:this.updateQq,
        student_id:this.updateStudent_id
      }).then( resp => {
        console.log(resp);
      })
    },
    deleteStudent(){
      axios.delete("http://localhost:8081/student",{
        params: {
          id: this.deleteStudentId
        }
      }).then(resp => {
        console.log(resp);
      })
    }
  }
}

</script>
<style scoped>
</style>